//使用无状态组件抽离
//有状态组件():可交互可展示的组件，一旦构建完成，组件的状态还会发生改变，并且可以在其生命周期中多次改变。

import 'package:flutter/material.dart';

class myApp2 extends StatefulWidget {
  myApp2({
    super.key,
  });

  @override
  State<myApp2> createState() => _nameState();
}

class _nameState extends State<myApp2> {
  final String name = '张三';
  int age = 20;
  @override
  Widget build(BuildContext context) {
    return //脚手架:搭建页面的基本框架
        Scaffold(
      appBar:
          //头部
          AppBar(
        title: const Text(
          '有状态组件',
          style: TextStyle(fontSize: 20, color: Colors.amber),
        ),
        backgroundColor: Colors.red,
        centerTitle: true,
      ),
      //身体
      body: Center(
        child: Text(
          '你好啊,我是$name,今年$age岁',
          style: const TextStyle(
              fontSize: 20, color: Color.fromARGB(255, 242, 190, 208)),
        ),
      ),
      // 按钮部分
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //通过setState方法更新数据
          setState(() {
            age = age + 1;
            print(age);
          });
        },
        // 设置图标
        child: const Icon(Icons.add),
      ),
    );
  }
}
